<template>
    <div>
        <el-button type="primary" @click="showDialog('insert')" v-if="menuId==='5180'">手动入库</el-button>
        <el-table :data="dataList" :highlight-current-row="true" stripe border class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading='loading'>
            <el-table-column fixed type="index" label="*"  min-width="40"></el-table-column>
            <el-table-column prop="partsNameName.name" label="部件名称" sortable min-width="140"></el-table-column>
            <el-table-column prop="partsCode" label="部件条码" sortable min-width="140"></el-table-column>
            <el-table-column prop="partsType" label="备件型号" sortable min-width="270"></el-table-column>
            <el-table-column prop="partsBatchCode" label="批号" sortable  min-width="140"></el-table-column>
            <el-table-column prop="creatorName" label="入库人" sortable  min-width="80"></el-table-column>
            <el-table-column prop="createTime" label="入库时间" sortable  min-width="120"></el-table-column>
            <el-table-column fixed="right" label="操作"  align="center" min-width="160">
                <template slot-scope="scope">
                    <el-button @click="deleteParts(scope.row)" type="text" size="small" v-if="menuId==='5180'">删除</el-button>
                    <el-button @click="showDialog2(scope.row)" type="text" size="small" v-if="scope.row.state===0">手动出库</el-button>
                     <el-button @click="showDialog1(scope.row)" type="text" size="small" v-if="scope.row.state===1">出库信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        <el-dialog :title="dialog.title" width="800" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false" >
             <el-form :inline="true" class="demo-form-inline" v-model="dialog.formData" label-position="right" label-width="180px">
                <el-form-item label="部件名称">
                    <el-autocomplete
                        v-model="dialog.formData.partsNameName" :fetch-suggestions="querySearchAsync" placeholder="请输入部件名称"  @select="handleSelect"></el-autocomplete>
                </el-form-item>
                <el-form-item label="部件条码">
                    <el-input  v-model="dialog.formData.partsCode" disabled></el-input>
                </el-form-item>
                <el-form-item label="备件型号">
                    <el-input  v-model="dialog.formData.partsType" disabled></el-input>
                </el-form-item>
                <el-form-item label="批号">
                    <el-input  v-model="dialog.formData.partsBatchCode" disabled></el-input>
                </el-form-item>
                <el-form-item label="入库人">
                    <el-input  v-model="dialog.formData.creatorName" disabled></el-input>
                </el-form-item>
                 <el-form-item label="入库时间">
                    <el-input  v-model="dialog.formData.createTime" disabled></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: center" slot="footer">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="dialog1.title" width="800" top="30px" :visible.sync="dialog1.isShow" :close-on-click-modal="false" >
            <!-- <el-button type="primary" @click="showDialog2('insert')">新增</el-button> -->
            <el-table :data="dialog1.tableList" :highlight-current-row="true" stripe border class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading='loading'>
                <el-table-column fixed type="index" label="*"  min-width="40"></el-table-column>
                <el-table-column prop="customerName.name" label="浆站名称" sortable min-width="140"></el-table-column>
                <el-table-column prop="machineName.name" label="机器名" sortable min-width="140"></el-table-column>
                <el-table-column prop="machineName.type" label="机器型号" sortable min-width="270"></el-table-column>
                <el-table-column prop="creatorName" label="出库人" sortable  width="100"></el-table-column>
                <el-table-column prop="createTime" label="出库时间" sortable  min-width="150"></el-table-column>
            </el-table>
        </el-dialog>
         <el-dialog :title="dialog2.title" width="800" top="30px" :visible.sync="dialog2.isShow" :close-on-click-modal="false" >
             <el-form :inline="true" class="demo-form-inline" v-model="dialog2.formData" label-position="right" label-width="180px">
                <el-form-item label="浆站名称">
                    <el-autocomplete
                        v-model="dialog2.formData.customerName" :fetch-suggestions="querySearchAsync1" placeholder="请输入部件名称"  @select="handleSelect1"></el-autocomplete>
                </el-form-item>
                <el-form-item label="机器" v-if="dialog2.formData.customerName&&machineList.length>0">
                    <el-select v-model="dialog2.formData.machine"   placeholder="请选择">
                        <el-option
                        v-for="item in machineList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div style="text-align: center" slot="footer">
                <el-button @click="submitList2" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import postSaleApi from "@/axios/postSale.js"
export default {
    data() {
        let menuId = sessionStorage.getItem('menuId');
      return {
          menuId,
          tableHeight:document.documentElement.clientHeight - 170,
          dataList:[],
          dialog:{
              title:'',
              isShow:false,
              formData:{}
          },
          loading:false,
          allParts:[],
          pagination:{
              pageSize:10,
              currentPage:1,
              total:0
          },
          dialog1:{
            title:'',
            isShow:false,
            pid:'',
            tableList:[]
          },
          dialog2:{
            title:'',
            isShow:false,
            formData:{}
          },
          machineList:[]
      }
    },
    created(){
        let self = this;
        self.getTableList();

        postSaleApi.allPartsList().then(res=>{
            res.content.forEach(element => {
                element.value = element.resourcenameName
            });
            self.allParts = res.content;
        })
    },
    methods:{
        getTableList(){
            let self = this;
            let postData={
                state: self.menuId==='5180'?0:1,
                pageSize:self.pagination.pageSize,
                currentPage:self.pagination.currentPage
            }
            self.loading = true;
            postSaleApi.shSpacePartsTaskList(postData).then(res=>{
                self.loading = false;
                self.dataList= res.content.records;
                self.pagination.total = res.content.total;
            },error=>{
                self.loading = false;
            })
        },

        showDialog(type){
            let self = this;
            this.dialog.title = '手动入库';
            this.dialog.isShow = true;
        },
        querySearchAsync(queryString, cb){
            var restaurants = this.allParts;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
            cb(results);
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            this.dialog.formData.partsName= item.resourcename;
            this.dialog.formData.partsCode=item.taskcode;
            this.dialog.formData.partsType = item.typenums;
            this.dialog.formData.partsBatchCode =item.batchnums;
        },
        submitList(){
            let self = this;
            let postData={
                 id:self.dialog.formData.id,
                partsName:self.dialog.formData.partsName,
                partsCode:self.dialog.formData.partsCode,
                partsType:self.dialog.formData.partsType,
                partsBatchCode:self.dialog.formData.partsBatchCode,
            }
            postSaleApi.addShSpacePartsTask(postData).then(res=>{
                self.dialog.isShow = false;
                self.$message.success('手动入库成功');
                self.getTableList();
            })
        },
        deleteParts(row){
            let self = this;
            self.$confirm('是否删除备件?', '提示', {
            confirmButtonClass: 'el-button--warning'
            }).then(() => {
                postSaleApi.deleteSpaceParts(row.id).then(res=>{
                    self.$message.success(`备件删除成功`);
                    self.getTableList();
                },error=>{
                    self.$message.error(`备件删除成功`);
                })
            }).catch(() => {})
        },
        showDialog1(row){
            let self = this;
            self.dialog1.title ="出库信息";
            self.dialog1.isShow = true;
            self.dialog1.pid = row.id;
            self.getOutStockList();
        },
        getOutStockList(){
            let self = this;
            postSaleApi.outStockList(self.dialog1.pid).then(res=>{
                self.dialog1.tableList = res.content;
            })
        },
        showDialog2(row){
            let self = this;
            self.dialog2.title = '新增出库信息';
            self.dialog2.isShow = true;
            self.dialog2.pid = row.id
        },
        querySearchAsync1(queryString, cb){
            postSaleApi.allShCustomerInfo({name:queryString}).then(res=>{
                res.content.forEach(item=>{
                    item.value = item.name
                })
                cb(res.content);
            })
        },
        handleSelect1(item){
            let self = this;
            self.dialog2.formData.customer=item.id;
            postSaleApi.machineListBgCid(self.dialog2.formData.customer).then(res=>{
                self.machineList = res.content;
            })
        },
        submitList2(){
            let self = this;
            let postData = {
                pid:self.dialog2.pid,
                customer:self.dialog2.formData.customer,
                machine:self.dialog2.formData.machine
            }
            postSaleApi.addOutStock(postData).then(res=>{
                self.dialog2.isShow = false;
                self.$message.success('新增出库信息');
                self.getTableList();
            })
        }
    }
  }
</script>
<style scoped>
</style>
